<template>
    <div class="mine-loading">
        <span class="mine-loading-indicator" v-if="indicator==='on'">
            <slot><img src="./loading.gif" alt=""></slot>
        </span>
        <span class="mine-loading-text" v-if="loadingText">{{loadingText}}</span>
    </div>
</template>

<script>
export default {
    name:'MeLoading',
    props: {
        indicator:{
            type:String,
            default:'on',
            validator(value){
                return ['on', 'off'].indexOf(value) > -1;
            }
        },
        text: {
            type:String,
            default:'加载中...',
        },
        inline:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            loadingText:this.text
        }
    },
    watch:{
        text(text){
            this.loadingText = text
        }
    },
    methods:{
        setText(text){
            this.loadingText = text
        }
    }
}
</script>
<style scoped>
  .mine-loading{
      font-size: 0.5rem;
      height: 1.3rem;
      line-height: 1.3rem;
      padding: 0.3rem 0.3rem;
  }


 </style>